<template>
    <div class="container">
        <HeaderBar
            current="recommend"
        />
        <div class="index_view">
            <div class="index_view_banner">
                <img
                    :src="detail.pic"
                    class="index_view_banner_img"
                />
            </div>
            <div class="container_main">
                <div class="list">
                    <div
                        class="list_item"
                        v-for="item in detail.scene"
                        :key="item.id"
                    >
                        <div class="list_item_main">
                            <img
                                :src="item.pic"
                                class="list_item_main_pic"
                            />
                            {{item.desc}}
                        </div>
                        <div class="list_item_goods">
                            <div
                                class="list_item_goods_item"
                                v-for="(json, key) in item.items"
                                :key="key"
                                @click="showDetail(json.id)"
                            >
                                <img
                                    :src="json.mainPic"
                                    class="list_item_goods_item_pic"
                                />
                                <div class="list_item_goods_item_info">
                                    <p class="clamp">{{json.name}}</p>
                                    <p>¥{{json.price}}</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>  
        </div>
    </div>
</template>
<script>
import HeaderBar from '@components/HeaderBar';
import {
    GetRecommendDetail
} from '@api/api';
export default {
    data() {
        return {
            detail: {},
            id: null
        }
    },
    components: {
        HeaderBar,
    },
    created () {
        let {
            id
        } = this.$route.params;
        this.id = id;
        this.getInit();
    },
    methods: {
        getInit() {
            GetRecommendDetail({id: this.id})
                .then(res=>{
                    this.detail = res.data;
                })
        },
        showDetail(id) {
            this.$router.push({path: `/goods/${id}`});
        },
    }
}
</script>
<style>
body {
    background: #F6F6F6;
}
</style>
<style scoped>
@import './detail.css';
</style>